
$primayColor:#20222a;
$regularColor:#F2F2F2;
$secondaryColor:#fff;
$warningColor:#F56C6C;
$primayText:#303133;
$regularText:#606266;
$secondaryText:#d1d1d1;
$shadowColor:#2233;


@mixin flex-center{
	display: flex;
	justify-content: center;
	align-items: center;
}

.myHeader{
    width: 100%;
    background-color: $secondaryColor;
    box-shadow: 0px 2px 4px 0px $shadowColor;
    .msgBox{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        .left-box, .right-box{
            display: flex;
            height: 100%;
            .img-box{
                height: 100%;
                width: 50px;
                @include flex-center();
                .img {
                    width: 20px;
                    height: 20px;
                    margin: 0px 10px;
                }
            }
        }
        .left-box{
            .search-inp{
                width: 150px;
                height: 100%;
                @include flex-center();
                .inp{
                    width:100%;
                    height: 20px;
                    border: none;
                    border-bottom: 1px solid $primayColor;
                    background-color:transparent;
                    margin: 0px 10px;
                    padding: 0px 5px;
                    &:focus{
                        outline:none;
                        border-bottom: 2px solid $primayColor;
                    }
                }
            }
        }
        .right-box{
            position: relative;
            padding-right: 95px;
            .user-img-box{
                position: absolute;
                right: 30px;
                height: 55px;
                width: 55px;
                @include flex-center();
                border-radius: 50%;
                background-color: $secondaryText;
                margin-top: 10px;
                .user-img{
                    width: 50px;
                    height: 50px;
                }
            }
        }

    }
    .navBox{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        border-top: 1px solid $secondaryText;
        .el-breadcrumb{
            margin-left: 15px;
        }
    }
}